<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="one">我是id为one的div</div>
  <p class="two">段落标签</p>
  <p class="two three">段落标签</p>
  <input type="text" name="username">
  <div name="username"></div>
  <script>
    /**
     * 查找/获取元素方法 
     * 1.通过id查找元素 getElementById('id');
     * 2.通过标签名获取元素  getElementsByTagName('标签名')
     * 3.通过类名获取元素 getElementsByClassName('类名')
     * 4.通过name属性获取元素 getElementsByName('name属性对应的属性值')
     * 5.querySelector 返回css选择器匹配到的第一个元素
     * 6.querySelectorAll 返回css选择器匹配到的所有元素
    */
    console.log(document.getElementById('one'));
    // 获取所有p标签组成的类数组对象
    console.log(document.getElementsByTagName('p')[0],'通过标签名获取');
    // 获取所有类名为two标签组成的类数组对象
    console.log(document.getElementsByClassName('two')[1],'通过类名获取标签');
    // 获取所有name属性为username的标签组成的Nodelist集合类数组对象
    console.log(document.getElementsByName('username'),'通过name属性');
    console.log(document.querySelector('.two'));
    console.log(document.querySelector('#one'),'1111');
    console.log(document.querySelector('input'));
    // 返回的是所有类名为two标签组成Nodelist集合 类数组对象 
    console.log(document.querySelectorAll('.two'),'2222');


    // 7.createElement方法 参数：标签名 创建一个元素节点 
    var h1 = document.createElement('h1');
    h1.textContent = '一级标题';
    document.body.appendChild(h1);

    // 8.write方法 参数：文本字符串 html代码片段 js表达式
    document.write('hello world');
    document.write('<h2>二级标题</h2>');
  </script>
</body>
</html>